<template>
  <view class="page">
    <view class="item" v-for="item in icons" :key="item" @click="click(item)">
      <vf-icons :type="item" :size="50" :color="mainColor"></vf-icons>
      <text class="text">{{ item }}</text>
    </view>
  </view>
</template>

<script>
import { mainColor } from '@/config/index.js'
export default {
  data() {
    return {
      mainColor,
      icons: ['sort', 'sortB', 'sortT', 'listB', 'listL', 'top', 'bottom', 'filter', 'filter1', 'share', 'share1', 'share2', 'book', 'scan', 'scan1', 'scan2', 'set', 'add', 'select', 'selected', 'selected1', 'history3', 'history4', 'write', 'write1', 'history', 'history1', 'history2', 'eye', 'eye1', 'rijian', 'rijianfill', 'yejian', 'yejian1', 'chehui', 'daxiaoxie', 'fankui', 'gengxin', 'mulu', 'about', 'warnfill', 'warn', 'ewm']
    }
  },
  methods: {
    click(item) {
      this.$$t.copyText(item);
      this.$$t.msg(item);
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  @include page;
  display: flex;
  flex-wrap: wrap;
  .item{
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .text{
      font-size: 26rpx;
      margin-top: 10rpx;
    }
  }
}
</style>
